 import { Link, NavLink } from 'react-router-dom';

export default function Navbar() {
  return (
    <nav className="bg-white dark:bg-slate-900 shadow-sm">
      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
        {/* Logo */}
        <div className="flex items-center">
          <Link to="/" className="text-2xl font-bold text-blue-600 dark:text-blue-400 flex items-center">
            <i className="fa-solid fa-font mr-2"></i>
            <span>OCR文字识别</span>
          </Link>
        </div>
        
        {/* 导航链接 - 桌面版 */}
        <div className="hidden md:flex space-x-8">
           <NavLink 
             to="/api" 
             className={({ isActive }) => 
               isActive 
                 ? "text-blue-600 dark:text-blue-400 font-medium" 
                 : "text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
             }
           >
             Free API
           </NavLink>
           <NavLink 
             to="/about" 
             className={({ isActive }) => 
               isActive 
                 ? "text-blue-600 dark:text-blue-400 font-medium" 
                 : "text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
             }
           >
             关于
           </NavLink>
        </div>
        
        {/* 移动端菜单按钮 */}
        <div className="md:hidden">
          <button className="text-slate-600 dark:text-slate-300">
            <i className="fa-solid fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </nav>
  );
}